<div id="device-information">
	<h1>Device Information</h1>
	<table id="viewport">
		<!-- Viewport -->
	    <tr class="viewport-header">
	        <th class="header" scope="col" colspan="2">Viewport</th>
	    </tr>
	    <tr>
	    	<td>Aspect Ratio</td>
	    	<td class="aspect-ratio"></td>
	    </tr>
	    <tr>
	    	<td>Width</td>
	    	<td class="width"></td>
	    </tr>
	    <tr>
	    	<td>Width (in EMs)</td>
	    	<td class="width-em"></td>
	    </tr>
	    <tr>
	    	<td>Meta Viewport Tag</td>
	    	<td class="meta-viewport-tag"></td>
	    </tr>
	</table>
	<table id="screensize">
	    <!-- Screen Size -->
	    <tr class="screen-size-header">
	        <th class="header" scope="col" colspan="2">Screen Size</th>
	    </tr>
	    <tr>
	    	<td>Screen Width</td>
	    	<td class="screen-width"></td>
	    </tr>
	    <tr>
	    	<td>Screen Available Width</td>
			<td class="screen-available-width"></td>
	    </tr>
	    <tr>
	    	<td>Window Inner Width</td>
			<td class="window-inner-width"></td>
	    </tr>
	    <tr>
	    	<td>Body Client Width</td>
	    	<td class="body-client-width"></td>
	    </tr>
	</table>
	<table id="resolution">
	    <!-- Resolution -->
	    <tr class="resolution-header">
	        <th class="header" scope="col" colspan="2">Resolution</th>
	    </tr>
	    <tr>
	    	<td>Dots Per Inch (DPI)</td>
	    	<td class="dpi"></td>
	    </tr>
	    <tr>
	    	<td>Dots Per Pixel (DPPX)</td>
	    	<td class="dppx"></td>
	    </tr>
	    <tr>
	    	<td>Dots Per Centimeter (DPCM)</td>
	    	<td class="dpcm"></td>
	    </tr>
	</table>
	<table id="misc">
	    <!-- Miscellaneous -->
	    <tr class="misc-header">
	        <th class="header" scope="col" colspan="2">Miscellaneous</th>
	    </tr>
	    <tr>
	    	<td>Root Font Size</td>
	    	<td class="root-font-size"></td>
	    </tr>
	    <tr>
	    	<td>Pixel Ratio</td>
	    	<td class="pixel-ratio"></td>
	    </tr>
	    <tr>
	    	<td>User Agent</td>
	    	<td class="user-agent"></td>
	    </tr>
	</table>
</div>
